<template>
    <div class="hotlist">
  <!-- <span @click="$router.go(-1)">&lt;</span> -->
  <div class="nav">
    <ul>
      <li>兼职误区</li>
      <li>实习攻略</li>
      <li>求职心态</li>
      <li>搞定简历</li>
    </ul>
  </div>
 
  <section v-for="(item,index) in newbool" :key="index">
<div class="top"><img src="../../../../public/imagescx/01.webp"> <span>资深运营经理 8年</span></div>
<ul>
  <li class="first"><span class="iconfont icon-wenda"></span>{{item.question}}</li>
  <li>{{item.content1}}</li>
  <li>{{item.content2}}</li>
  <li>{{item.content3}}</li>
  <li>{{item.content4}}</li>
</ul>
<div class="last"><div><span class="iconfont icon-bixin"></span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="iconfont icon-wenda"></span></div><div><span class="iconfont icon-bixin">&nbsp;&nbsp;&nbsp;</span>get<span></span></div></div>

  </section>
  <footer>
    <div @click="show=true">+</div>
  </footer>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" ><span @click="show=flase"><img src="../../../../public/imagescx/logoboss.png" alt=""></span>
  
  <div class="bottom">
<h1>Hi,小詹尼</h1>
<h5>社区达人都在分享</h5>
<div class="foot">
  <div @click="$router.push('/talkpop')"><span>点我修改</span><span>{{show==true? newdata.context:''}}</span></div>
  <div><span>求职笔记</span><span>记录求职所思所学</span></div>
  <div><span>个人日记</span><span>成长之路</span></div>
  <div><span>说一些话</span><span>有些话说</span></div>
  <div><span>没什么</span><span>说什么啊</span></div>
  <div><span>烦人的</span><span>这是个结尾</span></div>
</div>
  </div>
  
  
  
  
  </van-popup>

    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
show:false
      }
    },
 computed:{
  newbool(){
    this.$store.dispatch('LINK_JSON_SERVER')
   return this.$store.state.caixia.text
  },
  newdata(){
    return this.$store.state.caixia.update
  }
 

  }
  }
  </script>
  
  <style lang="scss" scoped>
  .hotlist{
      width:100%;
     
  }
  .nav{
    width: 100%;
    height: .5rem;
    
    ul{
      width:100%;
      height: 100%;
      display: flex;
      border-top:.01rem solid rgba(128, 128, 128, 0.116);
      border-bottom:.01rem solid rgba(128, 128, 128, 0.169);
      li{
        width: 35%;
        margin:.1rem .15rem;
        transform: scale(.7);
        white-space: nowrap;
        border: .01rem solid transparent;
        border-radius: .15rem;
        background-color: #64bfbb;
        color: white;

      }
    }
  }
  section{
    border-top: .02rem solid rgba(128, 128, 128, 0.263);
    border-bottom: .02rem solid rgba(128, 128, 128, 0.263);  
    height: 2.7rem;
    width: 100%;  
    padding: .1rem;
    .top{
      width: 3.4rem;
      height: .4rem;      
      margin: 0 auto;
      line-height: .4rem;
      img{
        width: .3rem;
        height: .3rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: .1rem;
      }
    }
    & ul{
line-height: .3rem;
.first{
  font-weight: 700;
}
    }
    .last{
      margin-top: .4rem;
      display: flex;
      justify-content: space-between;
    }
  }
  
 footer{
  div{
    color: white;
    text-align: center;
    line-height: .5rem;
    font-size: .5rem;
    width: .5rem;
    height: .5rem;
    background:linear-gradient(to right,rgba(153, 205, 50, 0.24),#64bfbb ,skyblue ) ;
    position: fixed;
    bottom: .1rem;
    right: .1rem;
    border-radius: 50%;
  }
 }
 .van-popup{
  background-color: #f3f4f5;
  display: flex;
  flex-direction: column;
  align-items: center;
.bottom{
  height: 4.4rem;
  width: 100%;
  // background-color: pink;
  position: fixed;
  bottom: 0;
  line-height: .3rem;
  img{
   
    width: .68rem;
    height: .22rem;
  }
  h1{
    font-size: .2rem;
    text-indent: .2rem;
  }
  h5{
    text-indent: .2rem;
    color: rgba(128, 128, 128, 0.29);
  }
  .foot{
    margin: .2rem .2rem;
    width:3.3rem ;
    height: 2.9rem;
    // background-color: orange;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    div{
      width: 1.55rem;
      height: .74rem;
      // background-color: lightcoral;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: white;
      text-indent: .2rem;
    
      
    }
  }
}
 }
  </style>